<div class="layui-fluid">
    <div class="layui-card">
        <!-- 搜索表单区 -->
        <form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="system-user-search-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="user_account" placeholder="请输入完整的用户账号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="user_name__op__like" placeholder="请输入姓名-模糊匹配"" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="user_phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn btn-system-user-search" lay-submit lay-filter="btn-system-user-form-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <!-- 列表区 -->
        <div class="layui-card-body">

            <!-- 头部工具栏模板 -->
            <script type="text/html" id="system_user_header_toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn" lay-event="add">添加</button>
                    <button class="layui-btn layui-btn-danger" lay-event="dels">删除</button>
                </div>
            </script>

            <!-- 列表表格 -->
            <table id="system-user-table" lay-filter="system-user-table" style="width: 100%"></table>

            <!-- 用户状态显示模板 -->
            <script type="text/html" id="use_status_templet">
                <b style="color:{{ d.user_status == 1?'green':'red' }};">{{ d.user_status == 1?'启用':'禁用' }}</b>
            </script>

            <!-- 每行操作按钮模板 -->
            <script type="text/html" id="system_user_row_toolbar">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>
<!-- JS脚本区 -->
<script>
    layui.use(['table', 'form', 'layer', 'jquery', 'admin'], function () {
        var form = layui.form, layer = layui.layer, table = layui.table, admin = layui.admin;

        // 表单搜索监听
        form.on('submit(btn-system-user-form-search)', function (data) {
            console.log('system-user-search-form', data)
            var field = data.field;
            //执行重载
            table.reload('system-user-table', {
                where: field,
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        // 渲染表格数据
        table.render({
            id: 'system-user-table',
            elem: '#system-user-table',
            toolbar: '#system_user_header_toolbar',
            url: '/system/user/list',
            loading: true,
            page: true, //开启分页
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'user_name', title: '姓名'},
                {field: 'user_account', title: '帐号'},
                {field: 'user_phone', title: '手机'},
                {field: 'user_last_login_datetime', title: '最后登录时间'},
                {field: 'user_create_datetime', title: '创建时间'},
                {field: 'user_status', title: '状态', event: 'showEvent', templet: "#use_status_templet"},
                {title: '操作', fixed: 'right', templet: '#system_user_row_toolbar'}
            ]],
            done: function () {
                // /* 编辑 */
                // layui.$('.btn-system-user-edit').click(function () {
                //     var $this = layui.$(this);
                //     layui.$.post('/system/user/edit_page', {user_id: $this.data('user_id')}, function (str) {
                //         layer.open({
                //             type: 1,
                //             title: '编辑',
                //             area: ['450px', '390px'],
                //             content: str
                //         });
                //     });
                // });
                // /* 修改用户状态 */
                // layui.$('.btn-system-user-status').click(function () {
                //     var $this = layui.$(this);
                //     layer.confirm('您确定要' + $this.attr('title') + '该用户?', {icon: 3, title: '系统提示'}, function (index) {
                //         layui.$.ajax({
                //             url: '/system/user/status',
                //             data: {
                //                 user_id: $this.data('user_id')
                //             },
                //             type: 'POST',
                //             success: function (result) {
                //                 if (result.success) {
                //                     layer.alert('操作成功', {icon: 6});
                //                 } else {
                //                     layer.alert(result.error.message, {icon: 5});
                //                 }
                //             }
                //         });
                //         layer.close(index);
                //         table.reload('system-user-table', {where: getParams()});
                //     });
                // });
                // /* 重置密码 */
                // layui.$('.btn-system-user-resetpwd').click(function () {
                //     var $this = layui.$(this);
                //     layer.confirm('您确定要重置该用户登录密码', {icon: 3, title: '系统提示'}, function (index) {
                //         layui.$.ajax({
                //             url: '/system/user/resetpwd',
                //             data: {
                //                 user_id: $this.data('user_id')
                //             },
                //             type: 'POST',
                //             success: function (result) {
                //                 if (result.success) {
                //                     layer.alert('密码重置成功，请使用：' + result.data + ' 进行登录', {icon: 6});
                //                 } else {
                //                     layer.alert(result.error.message, {icon: 5});
                //                 }
                //             }
                //         });
                //     });
                // });
                // /* 删除 */
                // layui.$('.btn-system-user-delete').click(function () {
                //     var $this = layui.$(this);
                //     layer.confirm('您确定删除该记录?', {icon: 3, title: '系统提示'}, function (index) {
                //         layui.$.ajax({
                //             url: '/system/user/delete',
                //             data: {
                //                 user_id: $this.data('user_id')
                //             },
                //             type: 'POST',
                //             success: function (result) {
                //                 if (result.success) {
                //                     layer.msg('删除成功', {icon: 6});
                //                 } else {
                //                     layer.msg('删除失败' + result.error.message, {icon: 5});
                //                 }
                //             }
                //         });
                //         layer.close(index);
                //         table.reload('system-user-table', {where: getParams()});
                //     });
                // });
            }
        });

        // 监听表格工具栏事件
        table.on("toolbar(system-user-table)", eventListener)

        // 监听表格行事件
        table.on("tool(system-user-table)", eventListener)

        // 事件监听
        function eventListener(obj) {
            let event = obj.event;
            let data = obj.data;
            switch (event) {
                case 'add':
                    layui.$.post('/system/user/editPage', function (str) {
                        layer.open({
                            type: 1,
                            title: '新建用户',
                            maxmin: true,
                            area: ['600px', '400px'],
                            content: str,
                        })
                    });
                    break;
                case 'edit':
                    layui.$.post('/system/user/editPage', {user_id: data.user_id}, function (str) {
                        layer.open({
                            type: 1,
                            title: '编辑用户',
                            maxmin: true,
                            area: ['600px', '400px'],
                            content: str,
                        })
                    });
                    break;
                case 'dels':
                    let checkStatus = table.checkStatus('system-user-table');
                    let selectRow = checkStatus.data;
                    deleteRow(selectRow);
                    break;
                case 'del':
                    let row = obj.data;
                    deleteRow([row]);
                    break;
            }
            console.log('toolbar_event', obj)
        }

        // 删除行方法
        function deleteRow(selectRows) {
            if (selectRows.length <= 0) {
                layer.msg('请先钩选要删除的记录行！');
                return;
            }
            layer.confirm('确定要删除这' + selectRows.length + '条记录吗？',
                {icon: 3, title: '提示', btn: ['确认删除', '取消']},
                function (index) {
                    console.log(index);
                    layui.$.ajax({
                        url: '/system/user/delete',
                        data: {
                            ids: selectRows.map((row) => row.user_id)
                        },
                        traditional: true,
                        type: 'POST',
                        success: function (result) {
                            if (result.success) {
                                layer.msg('删除成功', {icon: 6});
                                table.reload('system-user-table');
                            } else {
                                layer.msg('删除失败' + result.error.message, {icon: 5});
                            }
                        }
                    });
                });

        }

    })
</script>